<template>
  <div class="bottom-charts">
    <div class="bc-chart-item">
      <div class="bcci-header">讲座</div>
      <dv-active-ring-chart :config="config1" />
      <Label-Tag :config="labelConfig" />
    </div>
    <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" />

    <div class="bc-chart-item">
      <div class="bcci-header">展览</div>
      <dv-active-ring-chart :config="config2" />
      <Label-Tag :config="labelConfig" />
    </div>

    <dv-decoration-2 class="decoration-2" :reverse="true" style="width:5px;" />

    <div class="bc-chart-item">
      <div class="bcci-header">活动</div>
      <dv-active-ring-chart :config="config3" />
      <Label-Tag :config="labelConfig" />
    </div>

    <dv-decoration-2 class="decoration-3" :reverse="true" style="width:5px;" />

    <div class="bc-chart-item">
      <div class="bcci-header">捐赠</div>
      <dv-active-ring-chart :config="config4" />
      <Label-Tag :config="labelConfig" />
    </div>

  </div>
</template>

<script>
import LabelTag from './LabelTag';
export default {
  name: 'BottomCharts',
  components: {
    LabelTag
  },
  data() {
    return {
      config1: {
        data: [
          {
            name: '毛泽东',
            value: 356
          },
          {
            name: '周恩来',
            value: 215
          },
          {
            name: '朱德',
            value: 90
          },
          {
            name: '其他',
            value: 317
          }
        ],
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        radius: '65%',
        activeRadius: '70%'
      },
      config2: {
        data: [
          {
            name: '红星闪耀中国',
            value: 615
          },
          {
            name: '抗日战争',
            value: 322
          },
          {
            name: '解放战争',
            value: 198
          },
          {
            name: '其他',
            value: 80
          }
        ],
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        radius: '65%',
        activeRadius: '70%'
      },
      config3: {
        data: [
          {
            name: '诗歌朗诵',
            value: 452
          },
          {
            name: '画展',
            value: 512
          },
          {
            name: '书法大赛',
            value: 333
          },
          {
            name: '其他',
            value: 255
          }
        ],
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        radius: '65%',
        activeRadius: '70%'
      },
      config4: {
        data: [
          {
            name: '理论制度',
            value: 156
          },
          {
            name: '红色图书',
            value: 415
          },
          {
            name: '文学书籍',
            value: 90
          },
          {
            name: '其他',
            value: 210
          }
        ],
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        radius: '65%',
        activeRadius: '70%'
      },
      labelConfig: {
        data: ['太原市', '临汾市', '忻州市', '其他']
      }
    };
  }
};
</script>

<style lang="less">
.bottom-charts {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  .bc-chart-item {
    width: 25%;
    height: 100%;
    padding-top: 20px;
    box-sizing: border-box;
  }
  .bcci-header {
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
  }
  .dv-active-ring-chart {
    height: calc(~"100% - 80px");
  }
  .label-tag {
    height: 30px;
  }
  .active-ring-name {
    font-size: 18px !important;
  }
  .decoration-1,
  .decoration-2,
  .decoration-3 {
    margin-top: 1%;
    display: absolute;
    left: 0%;
  }
}
</style>
